<template>
  <div>
    <!-- 我是药品调价页面 -->
    <div class="buju">
       <div class="caidanming"><strong>药品进销存 /</strong>药品调价</div>  
      <div class="title">药品调价</div>
      <!-- 搜索框 -->
      <div class="section1-1">
        <i class="el-icon-search"></i>
        <input type="text" placeholder="药品名称" class="input1" />
      </div>
      <div class="section1-2">
        <el-select v-model="value2" placeholder="药品分类">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <!-- 表格 -->
      <div class="section2">
        <el-table
          ref="multipleTable"
          :data="newList"
          tooltip-effect="dark"
          style=" font-size:13px"
          @selection-change="handleSelectionChange"
          :row-style="{height:'60px'}"
          :header-cell-style="{color:'',borderBottom:'2px solid #39b9ae'}"
        >
          <!-- 勾选框 -->
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column prop="address" label="序号" width="100"></el-table-column>
          <el-table-column prop="name" label="药品名称" width="163"></el-table-column>
          <el-table-column prop="name" label="药品分类" width="163"></el-table-column>
          <el-table-column prop="name" label="药品规格" width="163"></el-table-column>
          <el-table-column prop="name" label="生产厂家" width="163"></el-table-column>
          <el-table-column prop="name" label="药品剂型" width="163"></el-table-column>
          <el-table-column prop="name" label="价格" width="163"></el-table-column>
          <el-table-column label="操作" width="100">
            <template>
              <el-dropdown>
                <el-button @click="dialogFormVisible = true" class="btn">调价</el-button>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 模态框的内容 -->
      
      <div class="motaikuang">
        <el-dialog title="药品调价" :visible.sync="dialogFormVisible">
          <el-form :model="form">
              <el-form-item label="售药价格" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" class="btnbtn">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false" class="btnbtn">保存</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 模态框
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        age: '',
        xingbie: '',
        bingzheng: '',
        chufang: '',
        tell: '',
        dizhi: '',
        date1: '',
        date2: '',
        yishi: '',
        beizhu: '',
        type: [],
      },
      formLabelWidth: '120px',
      //   选择器
      options: [
        {
          value: '选项1',
          label: '片',
        },
        {
          value: '选项2',
          label: '剂',
          disabled: true,
        },
        {
          value: '选项3',
          label: '颗粒',
        },
        {
          value: '选项4',
          label: '粉',
        },
        {
          value: '选项5',
          label: '稿',
        },
      ],
      value: '',
      // 供应商
      options2: [
        {
          value: '选项1',
          label: '阿莫西林2',
        },
        {
          value: '选项2',
          label: '苯海拉明注射液2',
        },
        {
          value: '选项3',
          label: '氯雷他定片2',
        },
        {
          value: '选项4',
          label: '999感冒颗粒2',
        },
        {
          value: '选项5',
          label: '鼻炎片2',
        },
      ],
      value2: '',
      // 日期选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            },
          },
        ],
      },
      value11: '',
      value22: '',
      // 表格
      pageNum: 6,
      nowPage: 0,
      drugList: [],
      newList: [],
      multipleSelection: [],
      currentPage: 1,
    };
  },
  computed: {},
  methods: {
    getPage(page) {
      this.newList = this.drugList.slice(
        this.pageNum * (page - 1),
        this.pageNum * page
      );
      console.log(page);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      console.log(val);
      this.getPage(val);
    },
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
/* 模态框的内容样式 */
.section1-2 {
  position: relative;
  top: -40px;
  left: 1000px;
}
.section1-2 >>> .el-input__inner {
  width: 170px;
}

.el-input >>> .el-input__inner {
  width: 200px;
}
.input2 {
  width: 150px;
  height: 30px;
  border: none;
  margin-left: 10px;
}
/* 确定取消按钮 */
.btnbtn {
  width: 80px;
  height: 45px;
}

/* 搜索框 */
.section1-1 {
  border-bottom: 1px solid gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
}
.input1 {
  width: 200px;
  height: 40px;
  border: none;
  margin-left: 10px;
  font-size: 17px;
}
input:focus {
  border: none;
  outline: none;
}
.nei1 {
  /* border: 1px solid yellow; */
  margin: 10px 0px 0px 0px;
  position: relative;
  top: 10px;
  right: 10px;
}
/* 日期选择器 */
.wai-block {
  display: inline-block;
  margin: 0px 10px;
}
.block1 {
  display: inline-block;
}
.block2 {
  display: inline-block;
}
.block1 >>> .el-input__inner {
  width: 140px !important;
}
.block1 >>> .el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
  width: 140px;
}
.block2 >>> .el-input__inner {
  width: 140px !important;
}
.block2 >>> .el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
  width: 140px;
}

.time-wen {
  font-size: 16px;
}
.btn {
  width: 70px;
  height: 35px;
  border: 1px solid #39b9ae;
  color: #39b9ae;
  /* font-size: 15px; */
  margin-left: 20px;
  background-color: #ffffff;
  outline: none;
  position: relative;
  top: 0px;
  right: 10px;
}
/* 外边距的顺序: 上 左 下 右 */
.caidanming {
  margin: 10px 0px 10px 10px;
}
.title {
  font-size: 30px;
  margin-top: 20px;
  font-weight: bold;
  margin: 20px 50px 25px 10px;
}

</style>